<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-08-15 16:45:26
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2023-01-02 20:44:14
 * @FilePath: \grazlink20\uc_sys\src\views\Asset\Pasture\components\Assets.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
 * 单个牧场-打标资产
-->
<script setup lang="ts">
import cs from '../components/Index.vue'
import { VxeButtonEvents, VxeToolbarInstance } from 'vxe-table'

import { reactive, ref, PropType, nextTick, computed, watch } from 'vue'

// import { adminFaEarconListApi } from '@/api/fa/earcon'
import { zcInventoryDetailedListApi } from '@/api/cy/Pan'

async function aa() {
  await zcInventoryDetailedListApi({
    pageSize: 10,
    pageNo: 1,
    inventory_id: '24',
    my_org_id: '1'
  }).then(
    function (value) {
      // 异步操作执行成功后的处理
      console.log(value.data, 'value.data')
      demo1.tableData = value.data
      // demo1.tableData1 = value.data
    },
    function (error) {
      // 异步操作失败的处理
      console.log(error)
    }
  )
}
aa()
const demo1: any = reactive({
  value1: false,
  tableData: [],
  tableData1: [],
  tableData3: []
})
// 导出的数据

let xTable = ref(null) as any
let xTable1 = ref(null) as any
let xTable2 = ref(null) as any
const xToolbar = ref<VxeToolbarInstance>()

// 选择导出
const exportSelectEvent: VxeButtonEvents.Click = () => {
  const $table = xTable.value
  $table.exportData({
    data: $table.getCheckboxRecords(),
    filename: '盘点模板',
    columnFilterMethod: function (column) {
      // console.log($columnIndex, '$columnIndex')
      return !(column.$columnIndex === 0)
    }
  })
  console.log(xTable.value, demo1)
}

// 全部导出
const exportDataEvent = () => {
  const $table = xTable1.value
  $table.exportData({
    type: 'csv',
    filename: '盘点模板',
    columnFilterMethod: function (column) {
      // console.log($columnIndex, '$columnIndex')
      return !(column.$columnIndex === 0)
    }
  })
}
// 导入数据
const importDataEvent = () => {
  const $table = xTable2.value
  $table.importData({
    types: ['csv'],
    afterImportMethod: function (column) {
      demo1.tableData1 = []
      console.log(column.$table.getTableData().tableData.length, demo1.tableData.length, 'ga')
      let shu = column.$table.getTableData().visibleData.length
      let table = column.$table.getTableData().visibleData.splice(0, shu)
      // demo1.tableData1 = []
      demo1.tableData3 = []
      for (let key = 0; key < shu; key++) {
        demo1.tableData3.push({})
        delete table[key].address
        delete table[key].breed
        delete table[key].is_insure
        delete table[key].id
        delete table[key].film_code
        delete table[key].sex
        delete table[key].bread_sub_name
        delete table[key].breed_name
        delete table[key].customer_id
        delete table[key].code
        delete table[key].breed_sub
        // if (key !== 'address') {
        //   newObj[key] = table[key]
        console.log([Object.values(table[key])][0])
        demo1.tableData3[key].breed_sub = [Object.values(table[key])][0][1]
        demo1.tableData3[key].code = [Object.values(table[key])][0][2]
        demo1.tableData3[key].customer_id = [Object.values(table[key])][0][3]
        demo1.tableData3[key].breed_name = [Object.values(table[key])][0][4]
        demo1.tableData3[key].bread_sub_name = [Object.values(table[key])][0][5]
        demo1.tableData3[key].sex = [Object.values(table[key])][0][6]
        demo1.tableData3[key].film_code = [Object.values(table[key])][0][7]
        demo1.tableData3[key].id = [Object.values(table[key])][0][8]
        demo1.tableData3[key].is_insure = [Object.values(table[key])][0][9]
        demo1.tableData3[key].breed = [Object.values(table[key])][0][10]
        demo1.tableData3[key].address = [Object.values(table[key])][0][11]
        demo1.tableData3[key].purpose = [Object.values(table[key])][0][12]
      }
      // demo1.tableData1 = table
      demo1.value1 = false
      demo1.tableData = demo1.tableData3
      console.log(demo1.tableData3, shu, '999')
    },
    beforeImportMethod: function (column) {
      column.$table.getTableData().tableData = []
    }
  })
}

const fff = () => {
  console.log(demo1.tableData, xTable2.value.getTableData().visibleData)
}

setTimeout(() => {
  watch(
    () => demo1.tableData1,
    () => {
      // if (xTable.value.getTableData().visibleData) {
      //   demo1.tableData = xTable2.value.getTableData().visibleData
      //   xTable.value.getTableData().visibleData = []
      // }
      // for (let key in demo1.tableData1) {
      //   // if (key !== 'address') {
      //   //   newObj[key] = table[key]
      //   // }
      //   demo1.tableData[key].breed_sub = [Object.values(demo1.tableData1[key])][0][1]
      //   demo1.tableData[key].code = [Object.values(demo1.tableData1[key])][0][2]
      //   demo1.tableData[key].customer_id = [Object.values(demo1.tableData1[key])][0][3]
      //   demo1.tableData[key].breed_name = [Object.values(demo1.tableData1[key])][0][4]
      //   demo1.tableData[key].bread_sub_name = [Object.values(demo1.tableData1[key])][0][5]
      //   demo1.tableData[key].sex = [Object.values(demo1.tableData1[key])][0][6]
      //   demo1.tableData[key].film_code = [Object.values(demo1.tableData1[key])][0][7]
      //   demo1.tableData[key].id = [Object.values(demo1.tableData1[key])][0][8]
      //   demo1.tableData[key].is_insure = [Object.values(demo1.tableData1[key])][0][9]
      //   demo1.tableData[key].breed = [Object.values(demo1.tableData1[key])][0][10]
      //   demo1.tableData[key].address = [Object.values(demo1.tableData1[key])][0][11]
      // }
      console.log(demo1.tableData)
    },
    { deep: true }
  )
}, 1000)

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  },
  detailSchema: {
    type: Array as PropType<DescriptionsSchema[]>,
    default: () => []
  }
})
console.log(props.currentRow, 'jjsh')

// 打印样式
const printStyle = `
            .title {
              text-align: center;
            }
            .my-list-row {
              display: inline-block;
              width: 100%;
            }
            .my-list-col {
              float: left;
              width: 25%;
              height: 28px;
              line-height: 28px;
            }
            .my-top,
            .my-bottom {
              font-size: 12px;
            }
            .my-top {
              margin-bottom: 5px;
            }
            .my-bottom {
              margin-top: 30px;
              text-align: right;
            }
            `

// 打印顶部内容模板
const topHtml = `
            <h1 class="title">盘点单</h1>
            <div class="my-top">
              <div class="my-list-row">
                <div class="my-list-col">牧场名称：${props.currentRow.name}</div>
                <div class="my-list-col">盘点单号：${props.currentRow.code}</div>
                <div class="my-list-col">盘点日期：${props.currentRow.creation_time}</div>
                <div class="my-list-col"></div>
                <div class="my-list-col">盘点类型：全部盘点</div>
                <div class="my-list-col">盘点人：${props.currentRow.creation_user_name}</div>
                <div class="my-list-col">牧场地址：${props.currentRow.address}</div>
                <div class="my-list-col">状态：待盘点</div>
              </div>
              <div class="my-list-row">
               
              </div>
            </div>
            `
let Tim = computed(() => {
  var myDate = new Date()
  var year = myDate.getFullYear() //获取当前年
  var mon = myDate.getMonth() + 1 //获取当前月
  var date = myDate.getDate() //获取当前日
  var hours = myDate.getHours() //获取当前小时
  var minutes = myDate.getMinutes() //获取当前分钟
  var seconds = myDate.getSeconds() //获取当前秒
  var now = year + '-' + mon + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
  return now
})

// 打印底部内容模板
const bottomHtml = `
            <div class="my-bottom">
              <div class="my-list-row">
                <div class="my-list-col"></div>
                <div class="my-list-col">总应盘数：呀呼</div>
                <div class="my-list-col">总实盘数：呀呼</div>
                <div class="my-list-col">总差异数：呀呼</div>
                <div class="my-list-col"></div>
                <div class="my-list-col"></div>
                <div class="my-list-col">创建人：八嘎</div>
                <div class="my-list-col">创建日期：${Tim.value}</div>
              </div>
            </div>
        `

// 打印
const printEvent1 = () => {
  const $table = xTable1.value
  $table.print({
    sheetName: '打印出货单据',
    style: printStyle,
    columns: [
      { type: 'seq' },
      { field: 'breed_sub' },
      { field: 'code' },
      { field: 'customer_id' },
      { field: 'breed_name' },
      { field: 'bread_sub_name' },
      { field: 'sex' },
      { field: 'film_code' },
      { field: 'id' },
      { field: 'is_insure' },
      { field: 'breed' },
      { field: 'address' },
      { field: 'purpose' }
    ],
    beforePrintMethod: ({ content }) => {
      // 拦截打印之前，返回自定义的 html 内容
      return topHtml + content + bottomHtml
    }
  })
}

nextTick(() => {
  // 将表格和工具栏进行关联
  const $table = xTable.value
  const $toolbar = xToolbar.value
  $table.connect($toolbar)
})

defineExpose(demo1)
</script>

<template>
  <div>
    <vxe-toolbar ref="xToolbar" print>
      <template #buttons>
        <vxe-button @click="exportDataEvent">导出全部</vxe-button>
        <vxe-button @click="exportSelectEvent">导出选中</vxe-button>
        <button @click="fff">fff</button>
        <vxe-button content="导入模板" @click="demo1.value1 = true" />
        <vxe-button content="打印表格" @click="printEvent1" />

        <vxe-modal v-model="demo1.value1" width="500">
          <template #title>
            <span style="color: red">上传中心</span>
          </template>
          <template #default>
            <!-- 下载模板 -->
            <cs />
            <br />
            <br />
            <vxe-button @click="importDataEvent">导入数据</vxe-button>
          </template>
        </vxe-modal>
      </template>
    </vxe-toolbar>

    <div style="display: flex">
      <div style="width: 30%">牧场名称：{{ $props.currentRow.pasture_org_name }}</div>
      <div style="width: 25%">单号：{{ $props.currentRow.code }}</div>
      <div style="width: 25%">盘点日期：{{ $props.currentRow.inventory_date }}</div>
      <div style="width: 20%"
        >牧场名称：{{ $props.currentRow.inventory_state == 1 ? '待盘点' : '已盘点' }}</div
      >
    </div>
    <vxe-table
      border
      ref="xTable"
      height="500"
      :row-config="{ isHover: true }"
      :import-config="{}"
      :export-config="{}"
      :print-config="{}"
      :data="demo1.tableData"
      :show-overflow="demo1.value1"
    >
      <vxe-column type="checkbox" width="60" />
      <vxe-column type="seq" />
      <vxe-column field="breed_sub" title="栏位" />
      <vxe-column field="code" title="资产编码" />
      <vxe-column field="customer_id" title="耳标号" />
      <vxe-column field="breed_name" title="畜别" />
      <vxe-column field="bread_sub_name" title="品种" />
      <vxe-column field="sex" title="性别" />
      <vxe-column field="film_code" title="月龄" />
      <vxe-column field="id" title="盘点规则" />
      <vxe-column field="is_insure" title="应盘数" />
      <vxe-column field="breed" v-slot="row" title="实盘数">
        <vxe-input v-model="row.row.breed"
      /></vxe-column>
      <vxe-column field="address" title="差异" show-overflow />
      <vxe-column field="purpose" title="备注" />
    </vxe-table>
    <vxe-table
      border
      ref="xTable1"
      height="400"
      :row-config="{ isHover: true }"
      :import-config="{}"
      :export-config="{}"
      :print-config="{}"
      :data="demo1.tableData"
      :show-overflow="demo1.value1"
      v-show="false"
    >
      <vxe-column type="checkbox" width="60" />
      <vxe-column type="seq" />
      <vxe-column field="breed_sub" title="栏位" />
      <vxe-column field="code" title="资产编码" />
      <vxe-column field="customer_id" title="耳标号" />
      <vxe-column field="breed_name" title="畜别" />
      <vxe-column field="bread_sub_name" title="品种" />
      <vxe-column field="sex" title="性别" />
      <vxe-column field="film_code" title="月龄" />
      <vxe-column field="id" title="盘点规则" />
      <vxe-column field="is_insure" title="应盘数" />
      <vxe-column field="breed" title="实盘数" />
      <vxe-column field="address" title="差异" show-overflow />
      <vxe-column field="purpose" title="备注" />
    </vxe-table>

    <vxe-table
      border
      ref="xTable2"
      height="400"
      :row-config="{ isHover: true }"
      :import-config="{}"
      :export-config="{}"
      :print-config="{}"
      :data="demo1.tableData1"
      :show-overflow="demo1.value1"
      v-show="false"
    >
      <vxe-column type="checkbox" width="60" />
      <vxe-column type="seq" />
      <vxe-column field="栏位" title="栏位" />
      <vxe-column field="资产编码" title="资产编码" />
      <vxe-column field="耳标号" title="耳标号" />
      <vxe-column field="畜别" title="畜别" />
      <vxe-column field="品种" title="品种" />
      <vxe-column field="性别" title="性别" />
      <vxe-column field="月龄" title="月龄" />
      <vxe-column field="盘点规则" title="盘点规则" />
      <vxe-column field="应盘数" title="应盘数" />
      <vxe-column field="实盘数" title="实盘数" />
      <vxe-column field="差异" title="差异" show-overflow />
      <vxe-column field="备注" title="备注" />
    </vxe-table>
  </div>
</template>
